<template>
	<div class="components-container">
		<split-pane :min-percent='24' :default-percent='24' split="vertical">
			<template slot="paneL">
				<div style="padding: 10px;">
					<div style="margin-top: 10px;height: 85vh;overflow: auto;">
						<el-tree class="filter-tree" ref="roleTree" :data="logList" :props="fileProps"
							:filter-node-method="filterNameNode" :highlight-current="fileProps.roleHighlight"
							:check-strictly="fileProps.checkStrictly" node-key="key">
							<span class="custom-tree-node" slot-scope="{ node, data }">
								<span>
									{{ data.name }}</span>
								<span>
									<el-button type="text" size="mini" @click="() => download(data)">
										下载
									</el-button>
									<el-button type="text" class="del-btn" size="mini" @click="() => view(data)">
										查看
									</el-button>
								</span>
							</span>
						</el-tree>
					</div>
				</div>
			</template>
			<template slot="paneR">
				<div style="padding: 10px;" v-loading="fileLoading">
					<div style="margin-top: 10px;">
						<el-row :gutter="20">
							<el-radio-group v-model="filterType" @change="modelChange">
								<el-radio :label="2">查看模式</el-radio>
								<el-radio :label="0">筛选模式</el-radio>
								<el-radio :label="1">监听模式</el-radio>
							</el-radio-group>
						</el-row>
						<el-row v-if="filterType == 2 " :gutter="20">
							<el-col :span="18">
								<el-form label-width="80px" :ref="viewFile" :model="viewFile">
									<el-form-item label="开始行">
										<el-input placeholder="开始行" v-model="viewFile.startRow" @change="simpleShow">
										</el-input>
									</el-form-item>
									<el-form-item label="结束行">
										<el-input placeholder="开始行" v-model="viewFile.endRow" @change="simpleShow">
										</el-input>
									</el-form-item>
								</el-form>
								<div style="margin-top: 10px;">
									<el-tag v-if="viewFile.name">{{viewFile.name}}</el-tag>
									<el-tag v-if="viewFile.allLines">共{{viewFile.allLines}}行</el-tag>
								</div>
							</el-col>
							<el-col :span="6">
								<el-button type="primary" @click='simpleShow'>开始简单</el-button>
							</el-col>
						</el-row>
						<el-row v-if="filterType == 1 " :gutter="20">
							<el-col :span="18">
								<el-form label-width="80px" :ref="viewFile" :model="viewFile">
									<el-form-item label="最近行数">
										<el-input placeholder="最近行数" v-model="viewFile.lineRange" @change="listenChange">
										</el-input>
									</el-form-item>
									<el-form-item label="间隔时间">
										<el-input placeholder="间隔时间" v-model="viewFile.listenTimes" @change="listenChange">
										</el-input>
									</el-form-item>
									<el-form-item label="监听">
										<el-switch v-model="viewFile.listening" @change="listenChange">
										</el-switch>
									</el-form-item>
								</el-form>
								<div style="margin-top: 10px;">
									<el-tag v-if="viewFile.name">{{viewFile.name}}</el-tag>
									<el-tag v-if="viewFile.allLines">共{{viewFile.allLines}}行</el-tag>
								</div>
							</el-col>
							<el-col :span="6">
								<!-- <el-button type="primary" @click='simpleShow'>重读</el-button> -->
							</el-col>
						</el-row>
						<el-row v-if="filterType == 0 " :gutter="20">
							<el-col :span="18">
								<el-form label-width="80px" :ref="fileSearch" :model="fileSearch">
									<el-form-item label="关键字">
										<el-input type="textarea" :rows="2" placeholder="过滤关键字"
											v-model="fileSearch.filterKey" @change="filterShow">
										</el-input>
									</el-form-item>
								</el-form>
								<el-form label-width="80px" :ref="viewFile" :model="viewFile">
									<el-form-item label="前后行数">
										<el-input placeholder="前后行数" v-model="viewFile.lineRange" @change="filterShow">
										</el-input>
									</el-form-item>
									<el-form-item label="显示全部">
										<el-switch v-model="viewFile.showAll" @change="filterShow">
										</el-switch>
									</el-form-item>
								</el-form>
								<div style="margin-top: 10px;">
									<el-tag v-if="viewFile.name">{{viewFile.name}}</el-tag>
									<el-tag v-if="viewFile.allLines">共{{viewFile.allLines}}行</el-tag>
									<el-tag v-if="viewFile.contentLines">共{{viewFile.contentLines.length}}处匹配</el-tag>
									<el-tag v-if="viewFile.contentLines  &&  !viewFile.showAll">
										当前第{{viewFile.currnetIndex + 1}}处</el-tag>
									<el-button v-if="viewFile.contentLines &&  !viewFile.showAll" type="text"
										@click='sub'>上一处
									</el-button>
									<el-button v-if="viewFile.contentLines  &&  !viewFile.showAll" type="text"
										@click='add'>下一处
									</el-button>
								</div>
							</el-col>
							<el-col :span="6">
								<el-button type="primary" @click='queryFiles'>筛选文件</el-button>
							</el-col>
						</el-row>
						<el-row :gutter="20"
							style="    border-radius: 4px;font-size: 14px;width: 65vw;height: 60vh;overflow-y: auto;overflow-x: auto;border: 1px solid #DCDFE6">
							<p v-html="showContent"></p>
						</el-row>
					</div>
				</div>
			</template>
		</split-pane>
	</div>
</template>

<script>
	import axios from 'axios'
	import {
		getToken
	} from '@/utils/auth'
	import splitPane from 'vue-splitpane'
	import request from '@/utils/request'
	import permission from '@/directive/permission/index.js' // 权限判断指令
	export default {
		name: 'fileLogList',
		components: {
			splitPane
		},
		directives: {
			permission
		},
		data() {
			return {
				//更多检索条件
				ipList: [],
				serviceList: [],
				ip: "",
				service: "",
				logList: [],
				fileProps: {
					children: 'children',
					label: 'label',
					roleHighlight: true,
					checkStrictly: true,
					filterText: ""
				},
				fileSearch: {
					filterKey: ""
				},
				filterType: 0,
				fileFilter: {

				},
				viewFile: {
					name: "",
					showAll: false,
					lineRange: 100,
					currnetIndex: 0,
					allLines: 0,
					startRow: 0,
					endRow: 0,
					listenTimes: 30,
					listening: false
				},
				showContent: "",
				fileLoading: false,
				listenCron: null,
			}
		},
		//页面初始化加载
		created() {
			this.queryFiles();
		},
		methods: {
			getServiceIps(val) {
				request({
					url: '/system/sys/getServiceIps/' + val,
					method: 'post'
				}).then(response => {
					this.ipList = response.data
				})
			},
			queryFiles() {
				request({
					url: "/system/sys/getLogs",
					method: 'post',
					data: this.fileSearch
				}).then(response => {
					debugger
					this.logList = response.data
				})
			},
			modelChange() {
				this.fileSearch.filterKey = "";
				this.showContent = "";
				this.queryFiles();
			},
			//筛选文件
			filterNameNode(value, data) {
				if (!value) {
					return true;
				}
				return data.name.indexOf(value) !== -1;
			},
			view(row) {
				debugger
				if(this.listenCron != null){
					clearInterval(this.listenCron)
				}
				this.viewFile.name = "";
				this.viewFile.currnetIndex = 0;
				this.viewFile.startRow = "";
				this.viewFile.endRow = "";
				this.viewFile.listenTimes = 30;
				this.viewFile.listening = false;
				this.viewFile.lineRange = 100;
				this.viewFile.showAll = false;
				for (var key in row) {
					this.viewFile[key] = row[key]
				}
				if(this.filterType == 0){
					this.filterShow();
				}
				if(this.filterType == 2){
					this.simpleShow();
				}
				if(this.filterType == 1){
					this.viewFile.lineRange = 3000;
					this.readAllLines();
				}
			},

			add() {
				if (this.viewFile.contentLines.length - 1 <= this.viewFile.currnetIndex) {
					this.viewFile.currnetIndex = this.viewFile.contentLines.length - 1;
				} else {
					this.viewFile.currnetIndex += 1;
				}
				this.filterShow();
			},
			sub() {
				if (this.viewFile.currnetIndex == 0) {
					this.viewFile.currnetIndex = 0;
				} else {
					this.viewFile.currnetIndex = this.viewFile.currnetIndex - 1;
				}
				this.filterShow();
			},
			filterShow() {
				let _this = this;
				if(!_this.fileSearch.filterKey){
					return;
				}
				_this.fileLoading = true;
				axios({
					url: this.viewFile.fullPath + "/base/log/readByFilter?X-Token=" + getToken(),
					method: 'post',
					data: this.viewFile
				}).then(response => {
					_this.fileLoading = false;
					let contents = "";
					for (var i = 0; i < response.data.data.length; i++) {
						contents += response.data.data[i].replace(_this.fileSearch.filterKey,
							"<span style='color:red;font-weight: bold;font-size: 200%;'>" + _this.fileSearch
							.filterKey + "</span>")
					}
					_this.showContent = contents;

				})
			},
			listenChange(val){
				if(this.viewFile.listening){
					if(this.listenCron != null){
						clearInterval(this.listenCron)
					}
					this.listenCron = setInterval(() => {
					      this.readAllLines()
					   }, this.viewFile.listenTimes * 1000) // 5s
				}else{
					if(this.listenCron != null){
						clearInterval(this.listenCron)
					}
				}
			},
			readAllLines(){
				let _this = this;
			    axios({
					url: this.viewFile.fullPath + "/base/log/readAllLines?X-Token=" + getToken(),
					method: 'post',
					data: this.viewFile
				}).then(response => {
					_this.viewFile.allLines = response.data.data;
					if(_this.viewFile.allLines > this.viewFile.lineRange){
						_this.viewFile.startRow = _this.viewFile.allLines -  this.viewFile.lineRange;
					}else{
						_this.viewFile.startRow = 0;
					}
					_this.readByListen()
				})
			},
			readByListen(){
				let _this = this;
				axios({
					url: this.viewFile.fullPath + "/base/log/readByListen?X-Token=" + getToken(),
					method: 'post',
					data: this.viewFile
				}).then(response => {
					let contents = "";
					for (var i = 0; i < response.data.data.length - 1; i++) {
						contents += response.data.data[i].replace(_this.fileSearch.filterKey,
							"<span style='color:red;font-weight: bold;font-size: 200%;'>" + _this.fileSearch
							.filterKey + "</span>")
					}
					_this.showContent = contents;
					if(response.data.data.length != 0){
						_this.viewFile.allLines =  response.data.data[response.data.data.length - 1]
					}
				})
			},
			simpleShow(){
				let _this = this;
				_this.fileLoading = true;
				axios({
					url: this.viewFile.fullPath + "/base/log/readBySimple?X-Token=" + getToken(),
					method: 'post',
					data: this.viewFile
				}).then(response => {
					_this.fileLoading = false;
					let contents = "";
					for (var i = 0; i < response.data.data.length - 1; i++) {
						contents += response.data.data[i].replace(_this.fileSearch.filterKey,
							"<span style='color:red;font-weight: bold;font-size: 200%;'>" + _this.fileSearch
							.filterKey + "</span>")
					}
					_this.showContent = contents;
					debugger
					if(response.data.data.length != 0){
						_this.viewFile.allLines =  response.data.data[response.data.data.length - 1]
					}
				})
			},
			download(row) {
				axios({
					url: row.fullPath + "/base/log/download?fileName=" + row.fileName +
						"&X-Token=" + getToken(),
					method: 'post',
					data: {},
					responseType: 'blob'
				}).then(response => {
					debugger
					this.downloadFile(response.data, row)
				})
			},
			// 下载文件
			downloadFile(data, row) {
				if (!data) {
					return
				}
				let url = window.URL.createObjectURL(new Blob([data]))
				let link = document.createElement('a')
				link.style.display = 'none'
				link.href = url
				let name = row.fileName;
				link.setAttribute('download', name)
				document.body.appendChild(link)
				link.click()
				this.downloading = false;
			},
		},
	}
</script>

<style>
	.menu-search {}

	.left-header {
		display: flex;
		align-items: center;
		flex-direction: row
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;
	}


	.top-container {
		width: 100%;
		height: 100%;
	}

	.el-row {
		margin-bottom: 10px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-pagination {
		float: right;
	}
</style>
